<template>
  <div>
    <div>
      <span>创建时间</span>&emsp;<el-date-picker
        v-model="value2"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始"
        :default-time="defaultTime1"
        end-placeholder="结束"
        :style="{ width: '200px' }"
      />
      <span :style="{ marginLeft: '16px' }">车次类型</span>&emsp;
      <el-select
        v-model="value3"
        class="m-2"
        placeholder="全部"
        size="default"
        :style="{ width: '100px' }"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="input2"
        class="w-50 m-2"
        placeholder="搜索车次/车站"
        :prefix-icon="Search"
        :style="{ width: '150px', marginLeft: '60px' }"
        @change="searchTrips"
      />
      <el-button @click="add">新建车票</el-button>
    </div>
    <avue-crud
      ref="crud"
      :data="props.dataList"
      :option="props.option"
      @search-change="searchChange"
      @row-save="rowSave"
      @row-del="rowDel"
      @current-change="currentChange"
      v-model:page="props.page"
    >
      <template #startTime="scope">
        <div style="display: flex; align-items: center; flex-direction: column">
          <span>{{ scope.row.startTime }}</span>
          <span :style="{ color: '#ccc' }">{{ scope.row.endTime }}</span>
        </div>
      </template>
      <template #last="scope">
        <div style="display: flex; align-items: left; flex-direction: column">
          <span>{{ scope.row.last }}</span>
          <span>{{ scope.row.arrive }}</span>
        </div>
      </template>
      <template #status="scope">
        <div style="display: flex; align-items: left">
          <span
            :style="{
              color: scope.row.status === '已提交' ? 'skyblue' : 'red',
            }"
            >{{ scope.row.status }}</span
          >
        </div>
      </template>
      <template #seat="scope">
        <div style="display: flex; align-items: center">
          <div style="display: flex; align-items: left">
            <span>{{ scope.row.seat }}</span
            >&emsp;
            <span
              :style="{ color: 'orange', fontSize: '16px', fontWeight: '600' }"
              >{{
                Number(scope.row.seatType) > 0 ? scope.row.seatType : "-"
              }}</span
            >
          </div>
        </div>
      </template>
      <template #state="scope">
        <div style="display: flex; align-items: center">
          <el-switch
            v-model="scope.row.state"
            class="ml-2"
            style="--el-switch-on-color: #19b8cb; --el-switch-off-color: #ccc"
          />
        </div>
      </template>
    </avue-crud>
    <AddCar
      :dialogVisible1="dialogVisible1"
      @closeTan1="closeTan1"
      @confirm2="confirm2"
    ></AddCar>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted, defineProps, toRefs, defineEmits } from "vue";
import { Search, Edit } from "@element-plus/icons-vue";
import { defaultAxios } from "@/utils/request";
import AddCar from "./AddCar.vue";
let dialogVisible = ref(false);
let lines = ref([]);
const pageList = ref([]);
const dialogVisible1 = ref(false);
const input2 = ref("");
const value3 = ref("");
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const options = [
  {
    value: "G71高铁",
    label: "G71高铁",
  },
];
const emit = defineEmits(["pagination", "search"]);
const value2 = ref("");
let props = defineProps({
  dataList: {
    type: Array,
  },
  page: {
    type: Object,
  },
  option: {
    type: Object,
  },
  list: {
    type: Array,
  },
});
let { dataList, page, option, list } = toRefs(props);
function rowSave(row, done, loading) {
  done({
    create_time: timestampToTime(new Date(row.create_time).getTime()),
    lines:
      "① 北京西 → ② 石家庄 → ③ 郑州东 → ④ 武汉 → ⑤ 长沙南 → ⑥怀化南 → ⑦贵阳北 → ⑧ 昆明南",
    startStation: "北京西-昆明南",
    state: row.state,
    trips: row.trips,
  });
  ElMessage({
    showClose: true,
    message: "添加成功 ",
    type: "success",
  });
}
function rowDel(row, index, done) {
  console.log(index);
  done(row);
}
const currentChange = (page) => {
  //模拟分页
  if (page === 1) {
    pageList.value = props.list.slice((page - 1) * 10, page * 10);

    emit("pagination", { Page: pageList.value, CurrentPage: page });
  } else if (page == 2) {
    console.log(page);
    pageList.value = props.list.slice((page - 1) * 10, page * 10);
    emit("pagination", { Page: pageList.value, CurrentPage: page });
  }
};
const searchTrips = () => {
  if (input2.value) {
    pageList.value = props.list.filter((item, i) => {
      return item.trips == input2.value;
    });
    emit("search", pageList.value);
  } else {
    emit("search", props.list);
  }
};
const add = () => {
  dialogVisible1.value = true;
};
const close = (val) => {
  dialogVisible1.value = val;
};

const delete2 = (val) => {
  dialogVisible.value = val.dialogVisible;
  lines.value = val.arr1;
  console.log(lines.value);
  props.dataList.value.push({
    create_time: "2023-03-30 16:20:06",
    lines: `① ${lines.value[0].label} → ②${lines.value[1].label} → ③ 郑州东 →  ④ 武汉 → ⑤ 长沙南 →  ⑥怀化南 → ⑦贵阳北 → ⑧ 昆明南`,
    name: "锺娜",
    startStation: "北京西-昆明南",
    state: false,
    sum: 713,
    total: 846,
    trips: "G71高铁",
  });
};
const closeTan1 = (tan) => {
  dialogVisible1.value = tan;
};
const confirm2 = (obj) => {
  dialogVisible1.value = obj;
};
const searchChange = (params, done) => {
  console.log(params.state);
  if (params.state) {
    let status = params.state == "启用" ? true : false;
    setTimeout(() => {
      props.dataList.value = dataList.value.filter((item) => {
        return item.state == status;
      });
      done();
    }, 1000);
  } else {
    props.dataList.value = props.list.value;
    done();
  }
};
</script>

<style>
/* * {
  display: flex;
  flex-direction: column;
} */
</style>
